<template>
  <div id="app">
    <NavBar />
    <div class="content-wrap">
      <router-view />
    </div>
    
  </div>
<!-- 新增底部导航栏 -->
<footer class="footer">
      <div class="footer-content">
        <div class="social-links">
          <a href="https://www.facebook.com/sakurapharma.ginza" target="_blank" rel="noopener">
            <img src="@/assets/f.jpg" alt="FaceBook">
          </a>
          <a href="https://line.me/ti/p/Z-nE45A4gd" target="_blank" rel="noopener">
            <img src="https://sakuradream.com/static/img/icon_5.png" alt="LINE">
          </a>
          <a href="https://www.youtube.com/@%E6%A1%9C%E5%80%89%E8%A3%BD%E8%96%AC%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE" target="_blank" rel="noopener">
            <img src="https://sakuradream.com/static/img/icon_4.png" alt="YouTube">
          </a>
          <a href="https://x.com/sakurapharma_JP" target="_blank" rel="noopener">
            <img src="https://sakuradream.com/static/img/icon_2.png" alt="Twitter">
          </a>
          <a href="https://www.instagram.com/sakurapharma_jp/" target="_blank" rel="noopener">
            <img src="https://sakuradream.com/static/img/icon_3.png" alt="Instagram">
          </a>
        </div>
        <div class="footer-links">
          <router-link to="/privacy-policy">Privacy Policy</router-link>
        </div>
        <p class="copyright">©Sakura Pharma Co., Ltd. All Rights Reserved.</p>
      </div>
    </footer>
</template>

<script>
import { ref, provide, onMounted, onBeforeUnmount } from 'vue'
import NavBar from './components/NavBar.vue'

export default {
  components: { NavBar },
  setup() {
    const isMobile = ref(false)

    const checkScreenSize = () => {
      isMobile.value = window.innerWidth <= 768
      console.log('Is mobile:', isMobile.value) // 调试用
    }

    onMounted(() => {
      checkScreenSize()
      window.addEventListener('resize', checkScreenSize)
    })

    onBeforeUnmount(() => {
      window.removeEventListener('resize', checkScreenSize)
    })

    provide('isMobile', isMobile)
    return { isMobile }
  }
}


</script>
<style scoped>
/* 新增导航栏固定定位样式 */
#app {
  padding-top: 0px; /* 根据导航栏实际高度调整 */
}

/* 新增页脚链接样式 */
.footer-links {
  margin: 15px 0;
}

.footer-links a {
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* 原有底部样式保持不变 */
.footer {
  background: #fef7ed;
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #e0e0e0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
}

.social-links a {
  display: inline-block;
  transition: transform 0.3s ease;
}

.social-links a:hover {
  transform: translateY(-3px);
}

.social-links img {
  width: 32px;
  height: 32px;
  filter: grayscale(100%);
  opacity: 0.8;
}

/* 移除原来的特殊样式 */


.copyright {
  color: #666; /* 修改文字颜色为白色 */
  font-size: 0.9rem;
  margin: 0;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .social-links {
    gap: 15px;
  }
  
  .social-links img {
    width: 28px;
    height: 28px;
  }
  
  .copyright {
    font-size: 0.8rem;
  }
}
</style>
